.main-bg {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: -100;
  height: 100%;
  width: 100%;
}
.box {
  position: relative;
  margin: 20px;
  width: 480px;
}
.box::before {
  content: "";
  color: #fff;
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -1px;
  left: -1px;
  background: #fff;
  z-index: -1;
  background: linear-gradient(235deg, #00bcd4, #060c21, #00bcd4);
}
.box::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -1px;
  left: -1px;
  background: #fff;
  z-index: -2;
  filter: blur(10px);
  background: linear-gradient(235deg, #00bcd4, #060c21, #00bcd4);
}
.map {
  height: 100%;
  width: 100%;
}
.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.flex {
  display: flex;
}
.column {
  flex-direction: column;
}
.center {
  align-items: center;
  justify-content: center;
}
.padding-30 {
  padding: 30px;
}
.padding-10 {
  padding: 10px;
}
.count-data {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: #fff;
}
.count-data .count-box {
  position: relative;
  border: 1px dashed rgba(158, 238, 251, 0.6);
  height: 100%;
  width: 100%;
}
.count-data .count-box .box-content-data {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.count-data .count-box .box-content-data .data-num {
  font-size: 24px;
  color: #4191b8;
}
.count-data .count-box .box-content-data .data-txt {
  color: #fff;
}
.count-data .count-box .angle {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #98ebfb;
}
.count-data .count-box .right-top {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #98ebfb;
  top: -1px;
  right: -1px;
  border-left: none;
  border-bottom: none;
}
.count-data .count-box .left-top {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #98ebfb;
  top: -1px;
  left: -1px;
  border-right: none;
  border-bottom: none;
}
.count-data .count-box .right-bottom {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #98ebfb;
  bottom: -1px;
  right: -1px;
  border-left: none;
  border-top: none;
}
.count-data .count-box .left-bottom {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #98ebfb;
  bottom: -1px;
  left: -1px;
  border-right: none;
  border-top: none;
}
.header {
  letter-spacing: 5px;
  background: linear-gradient(to left, #091230, #014484 50%, #091230);
  opacity: 0.7;
  text-align: center;
  color: #fff;
  font-size: 24px;
}
.bottom-content {
  height: 200px;
  padding: 0 20px;
}
.bottom-content .bottom-count {
  height: 100%;
}
.bottom-content .count-item {
  height: 100%;
}
.bottom-content .count-item .title {
  font-size: 18px;
  padding: 10px 0;
  color: #fff;
}
.bottom-content .count-item .num-count {
  font-size: 32px;
  color: #4191b8;
}
.bottom-content .b-box-header {
  letter-spacing: 5px;
  background: linear-gradient(to left, #091230, #014484 50%, #091230);
  opacity: 0.7;
  text-align: center;
  color: #fff;
  line-height: 50px;
  font-size: 24px;
  width: 100%;
  font-size: 18px;
}
.pr {
  position: relative;
}
